<template>
  <div class="history">
    <h4>搜索历史</h4>
    <div class="items">
      <span
        class="item"
        v-for="(history, index) in historyList"
        :key="index"
        @click="onSelect(history)"
      >{{history}}</span>
    </div>
  </div>
</template>
<script>
import { mapState } from "vuex";
export default {
  data() {
    return {};
  },
  computed: {
    ...mapState(["historyList"])
  },
  props: {
    value: {}
  },
  watch: {},
  methods: {
    onSelect(history) {
      // this.$emit("update:keyword", history); //更新sync
      this.$emit('input', history); //更新v-model
    }
  },
  components: {},
  mounted() {}
};
</script>
<style lang="less">
.index .history {
  .item {
    padding: 4px 8px;
    margin-right: 4px;
    margin-bottom: 4px;
  }
}
</style>